import React, {PureComponent} from "react";
import {Platform, StyleSheet, Text, View,Button,SafeAreaView, ScrollView, Image, Dimensions, TouchableOpacity} from "react-native";
import color from "../../widget/color";
import {ImageButton} from '../../widget/CustomButton'
import RefreshListView, {RefreshState} from "react-native-refresh-list-view";
import CommentListCell from '../../widget/comment/CommentListCell'
import CommentScene from './CommentScene'

const {width} = Dimensions.get('window')

type Props = {
    navigation:any,
}

type State = {
    data: Array<Object>,
    refreshState: number,
}

export default class CommentListScene extends PureComponent<Props,State> {

    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'black',
        title:'评论',
    })

    constructor(props){
        super(props)
        this.state = {
            data: [],
            refreshState: RefreshState.Idle,
        }
    }
//custon ui
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
    renderCell = (rowData: any) => {
        return (
            <CommentListCell

            />
        )
    }
    onCellSelected = (info: Object) => {
    }
    _pushCommentScene(){
        this.props.navigation.navigate('CommentScene')
    }
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <RefreshListView
                    data={[1,2,4,78,9]}
                    renderItem={this.renderCell}
                    keyExtractor={this.keyExtractor}
                    refreshState={this.state.refreshState}
                    onHeaderRefresh={this.requestFirstPage}
                    onFooterRefresh={this.requestNextPage}
                    ItemSeparatorComponent={()=><View style={{width:width - 24,marginLeft:12,height:1,backgroundColor:'#DFDFDF'}}/>}
                />
                <View style={{backgroundColor:'white',height:50,alignItems:'center',paddingLeft:12,paddingRight:12,flexDirection:'row'}}>
                    <Text style={{fontWeight:'200',fontSize:14,color:'rgba(0,0,0,0.8)'}}>共80条评论</Text>
                    <View style={{flex:1}}/>
                    <TouchableOpacity onPress={()=>{this._pushCommentScene()}} style={{alignItems:'center',justifyContent:'center',width:259,height:30,backgroundColor:'#F1F0F0',borderRadius:15,borderWidth:1,borderColor:'#DFDFDF'}}>
                        <Text style={{fontSize:11,fontWeight:'200',color:'rgba(0,0,0,0.3)'}}>期待你的评论...</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#F9F9F9',
        width:width,
    },
});




